<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var btn = document.getElementById('btn')
            btn.onclick = function(){
                console.log(111)
            }
            btn.onmouseover = function(){
                console.log(222)
            }
            btn.onmouseout = function(){
                console.log(333)
            }

            let username = document.getElementById('username')
            // username.onkeydown = function(){
            //     console.log(444)
            // }
            username.onkeypress = function(event){
                // console.log(event)
                if(event.keyCode == 13){
                    console.log('按回车了')
                }
            }
            // username.onkeyup = function(){
            //     console.log(666)
            // }

            username.onfocus = function(){
                this.style.background = 'pink'
            }
            username.onblur = function(){
                this.style.background = 'white'
            }









            
            var all = document.getElementById('all')
            all.onchange = function(){
                console.log(this.checked)
            }

            var myform = document.getElementById('myform')
            myform.onsubmit = function(){
                var username = document.getElementById('username')
                if(username.value == ''){
                    return false // 阻止表单提交
                }
                return true // 允许表单提交
            }
        }
    </script>
</head>
<body>
    <form action="" id="myform">
        <button id="btn">按钮</button>
        用户名：<input type="text" id="username" name="username"> <br>
    
        全选：<input type="checkbox" id="all"> <br>

        <input type="submit">
    </form>
</body>
</html>